<template>
    <van-nav-bar title="邮箱认证" left-arrow fixed @click="onClickLeft" />

    <div class="top_div">
        <div class="userInfo">
            <!-- /assets/home/images/avatar.jpg -->
            <img class="upic" :src="userInfo.avatar_cdn" />

        </div>
    </div>
    <van-form @submit="onSubmit">
        <div class="item">
            <div class="title">
                邮箱：
            </div>
            <input type="email" name="email" disabled placeholder="请输入邮箱" :value="userInfo.email">
        </div>
        <div class="item">
            <div class="title">
                验证码：
            </div>
            <input type="text" name="code" placeholder="请输入4位验证码" id="code" v-model="code">

            <van-button id="btn" type="success" :disabled="countdown > 0" @click="sendCode">
                {{ countdown > 0 ? `${countdown} 秒后重新发送` : '发送验证码' }}
            </van-button>
            <!-- <button type="button" id="btn" @click="sendCode">发送验证码</button> -->
        </div>

        <!-- <button id="button"  @click="checkemail">验证</button> -->
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
import { useUserStore } from '@/store/user.js'
import { storeToRefs } from 'pinia'
import apiList from '@/api'
import { ref,onBeforeUnmount } from 'vue'
import { showNotify, showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()
let { userInfo } = storeToRefs(userStore)
let code = ref('')//验证码
let sengflag = ref(false)//判断是否点击了发送验证码
let countdown = ref(0)//验证码计时
  let  timer = null//定时器

const onClickLeft = () => history.back();

async function onSubmit() {

    if (code.value.toString().length != 4) {
        showNotify({
            type: 'warning',
            message: '请输入正确的验证码'
        })
        return
    }
    if (!sengflag.value) {
        showNotify({
            type: 'warning',
            message: '您尚未发送验证码'
        })
        return
    }

    let data = {
        id: userInfo.value.id,
        email: userInfo.value.email,
        code: code.value
    }

    let res = await apiList.checkEmail(data)
    if (res.code == 1) {
        showToast({
            message: res.msg,
            position: 'bottom',
        });
        router.push('/business/base/index')
    } else {
        showNotify({
            type: 'warning',
            message: res.msg
        })
        code.value = ''
    }
}

async function sendCode() {

    //验证码按钮计时
    countdown.value = 60;
      timer = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(timer);
          timer = null;
        }
      }, 1000);

    let data = {
        id: userInfo.value.id,
        email: userInfo.value.email,
    }
    let res = await apiList.sendCode(data)
    if (res.code == 1) {
        showToast({
            message: res.msg,
            position: 'bottom',
        });
        sengflag.value = true
    } else {
        showNotify({
            type: 'warning',
            message: res.msg
        })
    }
}

//组件销毁前清除定时器
onBeforeUnmount(()=>{
    if (timer) {
        clearInterval(timer);
        timer = null;
      }
})
</script>

<style>
@import url('/assets/css/avatar.css');

.top_div {
    margin-top: 46px;
}

.item {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
    position: relative;
    padding: 0 10px;
}

.item input {
    width: 80%;
    height: 30px;
    margin-bottom: 0;
}

.title {
    width: 60px;
    text-align: right;
}

#btn {
    position: absolute;
    /* width: 96px; */
    height: 100%;
    right: 10px;
}

#button {
    width: 40%;
    height: 40px;
    display: block;
    margin: 0 auto;
    background: #08acee;
    border-color: #08acee;
    margin-top: 20px;
    color: #fff;
    border: none;
}
</style>